<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import { ref } from "vue";
import { getMyOrderList, updateOrderStatus, deleteOrder } from "@/api/order";
import { useUserStore } from "@/stores";
import { formatTime } from "@/utils/format";

const myOrderDetail = ref(null);

const userStore = useUserStore();
// 请求参数
const params = ref({
  current: 1,
  size: 10,
});
// 存储总数
const total = ref(0);
// 存储订单列表
const orderList = ref([]);
// 加载
const loading = ref(false);
// 获取订单列表
const getList = async () => {
  loading.value = true;
  const res = await getMyOrderList(params.value);
  total.value = res.data.data.total;
  orderList.value = res.data.data.data;
  loading.value = false;
};
getList();

const handleSizeChange = (val) => {
  params.size = val;
  getList();
};
const handleCurrentChange = (val) => {
  params.current = val;
  getList();
};

const handleRowClick = (vol) => {
  console.log(vol);
  // 打开抽屉
  myOrderDetail.value.handleOpen(vol);
};

// 确认收货
const confirm = async (row) => {
  const data = {
    orderId: row.orderId,
    status: 3,
  };
  const res = await updateOrderStatus(data);
  getList();
  ElMessage({
    message: "确认收货",
    type: "success",
  });
};
//删除订单;

const handleDelete = async (row) => {
  const res = await deleteOrder(row.orderId);
  getList();
  ElMessage({
    message: "删除成功",
    type: "success",
  });
};
// 子组件回调
const success = () => {
  // 刷新列表
  getList();
};
</script>
<template>
  <div class="myorder">
    <Card title="我的订单">
      <el-table
        :data="orderList"
        style="width: 100%; min-height: 50vh"
        v-loading="loading"
        :default-sort="[{ prop: 'createTime', order: 'descending' }]"
        highlight-current-row
        @row-click="handleRowClick"
      >
        <el-table-column type="index" label="序列" align="center" width="100" />
        <el-table-column prop="productName" label="产品名称" align="center" />
        <el-table-column prop="unitPrice" label="单价" align="center" />
        <el-table-column prop="quantity" label="数量" align="center" />
        <el-table-column prop="totalPrice" label="总价" align="center" />
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          sortable
        >
          <template #default="{ row }">
            {{ formatTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center"
          :filters="[
            { text: '待付款', value: 0 },
            { text: '待发货', value: 1 },
            { text: '已收货', value: 2 },
            { text: '确认收货', value: 3 },
            { text: '取消订单', value: 4 },
          ]"
          :filter-method="(value, row) => row.status === value"
          filter-placement="bottom-end"
        >
          <template #default="{ row }">
            <el-tag v-if="row.status === 0" type="danger">待付款</el-tag>
            <el-tag v-if="row.status === 1" type="primary">待发货</el-tag>
            <el-tag v-if="row.status === 2" type="warning">待收货</el-tag>
            <el-tag v-if="row.status === 3" type="success">已确认</el-tag>
            <el-tag v-if="row.status === 4" type="info">已取消</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <!-- 确认收货 -->
            <el-button
              type="success"
              :icon="Check"
              circle
              plain
              v-if="row.status === 2"
              @click.stop="confirm(row)"
            />
            <!-- 删除 -->
            <el-button
              type="danger"
              :icon="Delete"
              circle
              plain
              v-if="row.status === 3 || row.status === 4"
              @click.stop="handleDelete(row)"
            />
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="没有数据" />
        </template>
      </el-table>
      <el-pagination
        v-model:current-page="params.current"
        v-model:page-size="params.size"
        :page-sizes="[2, 3, 4, 5, 10]"
        background
        layout="jumper,total, sizes, prev, pager, next"
        :total="Number(total)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 50px; justify-content: flex-end"
      />
    </Card>
  </div>
  <MyOrderDetail ref="myOrderDetail" @success="success" />
</template>
<style scoped lang="scss">
.myorder {
  padding: 0 50px;
  width: auto;
}
</style>
